<template>
	<view>
		<view class="tab_list">
			<view v-for="(item,index) in tab_list" :key='index' :class="{items:true,items_active:tab_index==index}" @click="tabs1(index)">{{item}}</view>

		</view>
		<view v-show="tab_index == 0">
			<view class="cust">
				<view class="cust-top">
					<view>05月05日 洗剪吹 欧莱雅生化烫 </view>
					<view>¥ 888.00</view>
				</view>
				<view class="cust-data">2020-05-05 15: 55: 50</view>
				<view class="cust-cen">
					<view style="display: flex;">
						<view class="cust-img">
							<image src="/static/images/xiaochenxu.png" mode=""></image>
						</view>
						<view class="cust-cen-con">
							<view class="cen-con-wan">
								<text class="wan-text1">张艺兴</text>
								<text class="wan-text2">美vip</text>
							</view>
							<view class="con-tu">好评 4.7分｜预约 234次</view>
							<view class="con-sui">预约次数: 5次 消费总额:1000.00元</view>
							<view class="con-fu">备注：这个一个很可爱的顾客……</view>
						</view>
					</view>
					<view class="cust-right">
						<view class="dot" @click="Dot()">
							<u-icon name="more-dot-fill" color="#333" size="24"></u-icon>
						</view>
						<view class="dot-text" @click="profile()">顾客档案</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="tab_index == 2">
			<view class="birthday">
				<view class="birthday-top">
					<view class="birthday-top-img">
						<image src="/static/images/sheng.png" mode=""></image>
					</view>
					<view class="birthday-top-right">
						<view class="birthday-text">今天生日：05月05日  </view>
						<view class="birthday-name">
							<text>2020-05-05 </text>
							<text class="right-right">显示3天内过生日的顾客，按照国历计算；</text>
						</view>
					</view>
				</view>
				<view class="birthday-cen">
					<view style="display: flex;">
						<view class="cust-img">
							<image src="/static/images/xiaochenxu.png" mode=""></image>
						</view>
						<view class="cust-cen-con">
							<view class="cen-con-wan">
								<text class="wan-text1">张艺兴</text>
								<text class="wan-text2">美vip</text>
							</view>
							<view class="con-tu">好评 4.7分｜预约 234次</view>
							<view class="con-sui">预约次数: 5次 消费总额:1000.00元</view>
						</view>
					</view>
					<view class="cust-right">
						<view class="dot-text" @click="blessing()">去送祝福</view>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,
				tab_list: ['新顾客', '老顾客', '生日提醒']
			}
		},
		methods: {
			tabs1(index) {
				this.tab_index = index
			},
			// 删除
			Dot() {
				uni.showModal({
					title: '删除服务',
					content: '确定要删除这个顾客吗？',
					cancelText: '取消',
					cancelColor: '#00c6c2',
					confirmText: '删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 顾客档案
			profile(){
				uni.navigateTo({
					url:'/pagesF/profile/profile'
				})
			},
			// 生日祝福
			blessing(){
				uni.navigateTo({
					url:'/pagesF/blessing/blessing'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F0F0;
	}
	.birthday{
		margin-top: 20rpx;
		padding: 25rpx;
		background-color: #fff;
		
		.birthday-top{
			display: flex;
			border-bottom: 1rpx solid #CCCCCC;
			
			
			.birthday-top-img{
				width: 37rpx;
				height: 29rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.birthday-top-right{
				margin-left: 20rpx;
				
				.birthday-text{				
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #282828;
				}
				.birthday-name{
					
					text{					
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #5D5D5D;
					}
					.right-right{
						margin-left: 30rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #00C6C2;
					}
				}
			}
		}
		.birthday-cen{
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			
			.cust-img{
				width: 87rpx;
				height: 87rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.cust-cen-con {
				// width: 80%;
				padding-left: 32rpx;
			
				.cen-con-wan {
					display: flex;
					align-items: center;
			
					.wan-text1 {
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #000000;
					}
			
					.wan-text2 {
						display: inline-block;
						width: 62rpx;
						height: 24rpx;
						line-height: 24rpx;
						text-align: center;
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #F0D9A9;
						background-color: #000;
						margin-left: 15rpx;
					}
				}
			
				.con-tu {
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #414141;
					
				}
			
				.con-sui {
					padding-top: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #414141;
				}

			}
			.dot-text {
				border-radius: 5rpx;
				padding: 20rpx 24rpx;
				background-color: #00c6c2;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 30rpx;
			}
		}
	}

	.tab_list {
		padding: 30rpx 30rpx 0 30rpx;
		margin: 15rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;

		.items_active {
			border-bottom: 4rpx solid #00C6C2;
			font-weight: bold !important;
			color: #00C6C2 !important;
		}

		.items {
			height: 60rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8A8A8A;
		}
	}

	.cust {
		padding: 15rpx 20rpx;
		background-color: #fff;
		margin-bottom: 15rpx;

		.cust-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {

				font-size: 28rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;
			}
		}

		.cust-data {
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5D5D5D;
		}

		.cust-cen {
			padding-top: 20rpx;
			display: flex;

			justify-content: space-between;

			.cust-img {

				width: 87rpx;
				height: 87rpx;
				border-radius: 50%;


				image {
					width: 100%;
					height: 100%;

				}
			}

			.cust-cen-con {
				// width: 80%;
				padding-left: 32rpx;

				.cen-con-wan {
					display: flex;
					align-items: center;

					.wan-text1 {
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #000000;
					}

					.wan-text2 {
						display: inline-block;
						width: 62rpx;
						height: 24rpx;
						line-height: 24rpx;
						text-align: center;
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #F0D9A9;
						background-color: #000;
						margin-left: 15rpx;
					}
				}

				.con-tu {
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #414141;
					padding-top: 15rpx;
				}

				.con-sui {
					padding-top: 15rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #414141;
				}

				.con-fu {

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #5D5D5D;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}

			.cust-right {
				// width: 20%;

				.dot {
					width: 51rpx;
					height: 28rpx;
					line-height: 20rpx;
					text-align: center;
					border-radius: 40rpx;
					background-color: #F1F1F1;
					margin-left: 90rpx;
				}

				.dot-text {
					border-radius: 5rpx;
					padding: 20rpx 24rpx;
					background-color: #00c6c2;
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 60rpx;
				}
			}
		}
	}

</style>
